<template>
	<view class="page">
		<view class="info" v-for="(item,index) in previewData">
			<view class="wrap">
				<view class="wrap_left">
					<view class="wrap_left_textOne">
						播报顺序
					</view>
					<view class="wrap_left_textTwo">
						{{index + 1}}
					</view>
				</view>
				<view class="wrap_right">
					<view class="wrap_right_top">
						<view class="wrap_right_top_textOne">
							{{item.name}}
						</view>
						<view class="wrap_right_top_textTwo" @click="redact(index)">
							{{item.play_time}}小时
							<image class="redact_img" src="../../static/img/redact.png" mode="" ></image>
						</view>
					</view>
					<scroll-view class="wrap_right_bottom_scroll" :scroll-top="scrollTop" scroll-y="true" @scroll="scroll" scroll-with-animation="true">
						<view class="wrap_right_bottom">
								<span class="wrap_right_bottomText" v-for="(itemChild,index) in item.content_list">{{index + 1}}.{{itemChild.content_name}}</span>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="wrap">
				<view class="wrap_bottom_left" @click="up(index)">
					<span><image class="up" src="../../static/img/up.png" mode=""></image></span>
					<span class="wrap_bottom_leftText">上移</span>
				</view>
				<view class="wrap_bottom_right" @click="descend(index)">
					<span><image class="descend" src="../../static/img/descend.png" mode=""></image></span>
					<span class="wrap_bottom_rightText">下移</span>
				</view>
			</view>
		</view>
		
		<view class="bottom">
			<view class="bottom_but" @click="completeSet">
				<span class="bottom_but_text">节目单生成</span>
			</view>
		</view>
		<u-popup width="700rpx" height="500rpx"  v-model="show" mode="center">
			<view class="popup" catchtouchmove="true">
				<view class="popup_title">
					<span class="popup_title_textOne">调整</span>
					<span class="popup_title_textTwo">{{msgboxTitle}}</span>
					<span class="popup_title_textOne">的播放时长</span>
				</view>
				<view class="popup_number_box">
					<!-- <u-number-box v-model="value"  bg-color="#FFC694" @change="valChange" size="30" input-width="200" input-height="100"></u-number-box> -->
					<view class="minus" @click="reduce">
						<u-icon name="minus"></u-icon>
					</view>
					<view class="number">
						<u-input v-model="num" type="number" :border="border" :placeholder="null" input-align="center" :clearable='false'/>
					</view>
					<view class="plus" @click="increase">
						<u-icon name="plus"></u-icon>
					</view>
				</view>
				<view class="popup_time">
					<span>单位：h（小时）</span>
				</view>
				<view class="popup_bottom">
					<view class="popup_bottom_left" @click="cancel">
						取消
					</view>
					<view class="popup_bottom_right" @click="ensure">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		<view style="height: 10vh;"></view>
	</view>
</template>

<script>
export default{
	name:'preview',
	data(){
		return{
			show: false,
			value: 1,
			num:1,
			scrollTop: 0,
			old: {
				scrollTop: 0
			},
			previewData:[],
      msgboxTitle:'',
      programId:0,
		}
	},
	mounted() {
		this.showPreview()
	},
	methods:{
		//节目单预览
		async showPreview(){
      let params={
        "login_token":uni.getStorageSync('loginToken')
      }
      let res=await this.$api.getProgrammeDetail(params)
      if(res.data.level == "success"){
        this.previewData=res.data.data
      }else{
        uni.showToast({
          title:res.data.message,
          icon:'none'
        })
      }
		},
		redact(index){
      this.num= this.previewData[index].play_time
      this.msgboxTitle = this.previewData[index].name
      this.programId = this.previewData[index].id
      this.show = true;
		},
		//上移
		up(index){
      this.programId = this.previewData[index].id
      this.setSort("up")
		},
		//下移
		descend(index){
      this.programId = this.previewData[index].id
      this.setSort("down")
		},
    //设置排序
    async setSort(sort_type){
      let params={
        "login_token":uni.getStorageSync('loginToken'),
        "programme_id":this.programId,
        "sort_type":sort_type
      }
      let res=await this.$api.setProgrammeSort(params)
      if(res.data.level == "success"){
        this.showPreview()
      }else{
        uni.showToast({
          title:res.data.message,
          icon:'none'
        })
      }
    },

		cancel(){
			this.num = 0
			this.show = false
		},
		ensure(){
			if(this.num==0){
				uni.showToast({
				    title: '播放时长不能为0',
				    duration: 2000,
					icon:'none'
				});
				return
			}
			let number = /^\d+(\.\d+)?$/;
			if(!number.test(this.num)){
				uni.showToast({
				    title: '播放时长必须为数字',
				    duration: 2000,
					icon:'none'
				});
			}else{
				this.setProgrammePlayTime(this.num)
			}
		},
    async setProgrammePlayTime(play_time){
      let params={
        "login_token":uni.getStorageSync('loginToken'),
        "programme_id":this.programId,
        "play_time":play_time
      }
      let res=await this.$api.setProgrammePlayTime(params)
      if(res.data.level == "success"){
        this.show = false
        uni.showToast({
          title: '设置成功！',
          duration: 2000,
        });
        this.showPreview()
      }else{
        uni.showToast({
          title:res.data.message,
          icon:'none'
        })
      }
    },
		open() {
			this.show = true
			console.log(this.show);
		},
		close() {
			this.show = false
			// console.log('close');
		},
		valChange(e) {
			console.log('当前值为: ' + e.value)
		},
		//滑动
		scroll(e) {
			this.old.scrollTop = e.detail.scrollTop
		},
		
		//减少
		reduce(){
			if(this.num!=0){
				this.num--
			}else{
				uni.showToast({
				    title: '播放时长不能少于0秒',
				    duration: 2000,
					icon:'none'
				});
			}
		},
		//增加
		increase(){
			this.num++
		},
    async completeSet(){
      let params={
        "login_token":uni.getStorageSync('loginToken'),
      }
      let res=await this.$api.setProgrammeDeviceActive(params)
      if(res.data.level == "success"){
        uni.showToast({
          title: '节目单发布成功！',
          duration: 2000,
        });
      }else{
        uni.showToast({
          title:res.data.message,
          icon:'none'
        })
      }
    }
	}
}
</script>

<style scoped lang="scss">
	.page{
		background-color: #fdc986;
		min-height: 100vh;
		overflow: hidden;
	}
	.info{
		padding: 23rpx;
	}
	.wrap {
		display: flex;
		justify-content: flex-start;
	}
	.wrap_left{
		background-color: #81120D;
		border: #FFC694  solid 1rpx;
		width: 150rpx;
		height: 400rpx;
		text-align: center;
	}
	.wrap_left{
		
		
	}
	.wrap_left_textOne{
		color: #FFC695;
		margin-top: 35rpx;
		font-size: 30rpx;
	}
	.wrap_left_textTwo{
		color: #FFC695;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 300rpx;
		font-size: 70rpx;
	}
	.wrap_right{
		
	}
	.wrap_right_top{
		padding: 10rpx;
		color: #FFC695;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.wrap_right_top_textOne{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.wrap_right_top_textTwo{
		font-size: 29rpx;
		white-space: nowrap;
		padding-right: 10rpx;
	}
	.redact_img{
		width: 30rpx;
		height: 26rpx;
		margin-left: 20rpx;
	}
	.wrap_right_top{
		width: 550rpx;
		height: 100rpx;
		background-color: #91150F;
		border: #FFC694  solid 0.5rpx;
	}
	.wrap_right_bottom{
		display: flex;
		padding-top: 30rpx;
		padding-left: 30rpx;
		padding-bottom: 30rpx;
		line-height: 50rpx;
		flex-direction: column;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFC695;
	}
	.wrap_right_bottom_scroll{
		background-color: #91150F;
		border: #FFC694  solid 0.5rpx;
		width: 548rpx;
		height: 298rpx;
	}
	.wrap_right_bottomText{
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    //display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    white-space: nowrap;
		width: 98%;
	}
	.wrap_bottom_left{
		width: 350rpx;
		height: 100rpx;
		background-color: #91150F;
		border: #FFC694  solid 0.1rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFC695;
	}
	.up{
		width: 18rpx;
		height: 35rpx;
		margin-right: 10rpx;
	}
	.wrap_bottom_leftText{
		margin-left: 10rpx;
	}
	.descend{
		width: 18rpx;
		height: 35rpx;
		margin-right: 10rpx;
	}
	.wrap_bottom_rightText{
		margin-left: 10rpx;
	}
	.wrap_bottom_right{
		width: 350rpx;
		height: 100rpx;
		background-color: #91150F;
		border: #FFC694  solid 0.1rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFC695;
	}
	.bottom{
		background-color: #FFC18A;
		border-top: #93110A solid 1rpx;
		position: fixed;
		bottom: 0;
		// left: 0;
		height: 130rpx;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.bottom_but{
		background-image: url(../../static/img/login_imgTwo.png);
		background-repeat: no-repeat;
		height: 100rpx;
		background-size: 100% 100%;
		width: 90%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.bottom_but_text{
		color: #FFD4A5;
		font-weight: 550;
		font-size: 35rpx;
	}
	.popup{
		background-color: #FFC18A;
		height: 600rpx;
		width: 100%;
		text-align: center;
	}
	.popup_title{
		width: 100%;
		height: 80rpx;
		padding-top: 50rpx;
	}
	.popup_number_box{
		margin-top: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.minus{
		width: 100rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-left: 1rpx solid #93110A;
		border-bottom: 1rpx solid #93110A;
		border-top: 1rpx solid #93110A;
	}
	.number{
		width: 200rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1rpx solid #93110A;
	}
	.plus{
		width: 100rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-right: 1rpx solid #93110A;
		border-bottom: 1rpx solid #93110A;
		border-top: 1rpx solid #93110A;
	}
	
	
	/deep/.u-icon-plus{
		width: 100rpx !important;
		background-color: #93110A !important;
		margin-left: -6rpx !important;
		color: #FFC694 !important;
	}
	/deep/.u-icon-minus{
		width: 100rpx !important;
		background-color: #FFC18A !important;
		border-bottom: #93110A solid 1rpx !important;
		border-top: #93110A solid 1rpx !important;
		border-left: #93110A solid 1rpx !important;
		margin-right: -6rpx !important;
		color: #93110A !important;
	}
	/deep/.u-number-input{
		background-color: #FFC18A !important;
		border: #93110A solid 1rpx !important;
		height: 98rpx !important;
		
	}
	.popup_time{
		margin-top: 30rpx;
		color: #93110A;
		font-size: 25rpx;
	}
	.popup_bottom{
		display: flex;
		justify-content: center;
		margin-top: 90rpx;
		height: 100rpx;
		border-top: #93110A solid 1px;
	}
	.popup_bottom_left{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50%;
		
	}
	.popup_bottom_right{
		background-color: #93110A;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50%;
		color: #FFC18A;
	}
	.popup_title_textOne{
		font-size: 35rpx;
		font-weight: 550;
		margin-right: 15rpx;
	}
	.popup_title_textTwo{
		color: #93110A;
		font-size: 35rpx;
		font-weight: 550;
		margin-right: 15rpx;
	}
</style>
